/* eslint-disable vue/require-v-for-key */
<template>
  <div class="derive-low-case">
    <div class="title">以案说法</div>
    <div class="content-box">
      <div class="content-title">
        <span>《以案说法》——专利复审、无效典型案例指引</span>
      </div>
      <div class="main-body">
        <div class="left-main">
          <div class="left-main-top">
            <span style="color: #303133">目录</span>
            <span class="open" @click="changeLoad(treeData)">
              {{
                iconClass === "fa fa-angle-double-down" ? "全部展开" : "全部收起"
              }}
              <i :class="iconClass" aria-hidden="true" />
            </span>
          </div>
          <div class="left-main-bottom">
            <el-tree
              ref="treeRef"
              class="treeDom"
              v-bind="treeOption"
              :data="treeData"
              @node-click="handleNodeClick"
            />
          </div>
        </div>
        <div class="right-main">
          <div class="right-main-top">
            <el-input
              v-model.trim="searchInfo"
              placeholder="请输入关键字"
            />
            <el-button type="primary" icon="el-icon-search" @click="searchInfoClick">搜索</el-button>
          </div>
          <div class="right-main-bottom">
            <div v-for="item in conentData" :key="item.id">
              <div class="right-item-title">{{ item.level }}</div>
              <div class="right-item-title">{{ item.mlid }}  {{ item.title }}</div>
              <p class="right-container">
                {{ item.id }}  {{ item.content_no }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getList, getContentist, queryContentist } from './mock'
import { getList, getContentist, queryContentist } from '@/api/yasf'
export default {
  name: 'DeriveLowCase',
  data() {
    return {
      searchInfo: '', // 搜索框内容
      iconClass: 'fa fa-angle-double-down',
      // tree配置
      treeOption: {
        props: {
          children: 'children',
          label: 'label'
        },
        defaultExpandAll: true,
        expandOnClickNode: false,
        nodeKey: 'id'
      },
      // 目录数据
      treeData: [
        {
          label: '1 第一章 不授予专利权的客体',
          id: '1',
          children: [
            {
              label: '1.1《专利法》第2条所称的发明创造',
              id: '1-1',
              children: [
                {
                  id: '1-1-1',
                  label: '1.1.1技术方案的判断'
                },
                {
                  id: '1-1-2',
                  label: '1.12实用新型专利保护客体的特殊问题'
                }
              ]
            },
            {
              label: '1.2根据《专利法》第5条不授予专利权的客体',
              id: '1-2',
              children: [
                {
                  id: '1-2-1',
                  label: '1.2.1发明创造是否违反法律'
                },
                {
                  id: '1-2-2',
                  label: '1.2.2发明创造是否违反社会公德'
                },
                {
                  id: '1-2-3',
                  label: '1.2.3发明创造是否妨害公共利益'
                }
              ]
            },
            {
              label: '1.3根据《专利法》第25条不授予专利权的客体',
              id: '1-3',
              children: [
                {
                  id: '1-3-1',
                  label: '1.3.1 发明创造与科学发现'
                },
                {
                  id: '1-3-2',
                  label: '1.3.2 智力活动规则和方法'
                },
                {
                  id: '1-3-3',
                  label: '1.3.3 疾病的诊断和治疗方法'
                },
                {
                  id: '1-3-4',
                  label: '1.3.4 动物和植物品种'
                }
              ]
            },
            {
              label: '1.4 计算机领域的特殊题',
              id: '1-4',
              children: [
                {
                  id: '1-4-1',
                  label: '1.4.1 涉及商业方法的专利申请'
                },
                {
                  id: '1-4-2',
                  label: '1.4.2 计机算法'
                },
                {
                  id: '1-4-3',
                  label: '1.4.3 图形用户界面'
                },
                {
                  id: '1-4-4',
                  label: '1.4.4 语义分析'
                },
                {
                  id: '1-4-5',
                  label: '1.4.5 机器译'
                },
                {
                  id: '1-4-6',
                  label: '1.4.6 汉字入方法'
                },
                {
                  id: '1-4-7',
                  label: '1.4.7 计机图形学'
                },
                {
                  id: '1-4-8',
                  label: '1.4.8 信号结构和结构'
                }
              ]
            }
          ]
        },
        {
          label: '2 第二章现有技术和现有设计',
          id: '2',
          children: [
            {
              label: '2.1 现有技术与现有设计的审查基准',
              id: '2-1',
              children: [
                {
                  id: '2-1-1',
                  label: '2.1.1 为公众所知的念'
                }
              ]
            },
            {
              label: '二级 2-2',
              id: '2-2',
              children: [
                {
                  id: '2-2-1',
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          id: '3',
          children: [
            {
              label: '二级 3-1',
              id: '3-1',
              children: [
                {
                  id: '3-1-1',
                  label: '三级 3-1-1'
                },
                {
                  id: '3-1-2',
                  label: '三级 3-1-1'
                },
                {
                  id: '3-1-3',
                  label: '三级 3-1-1'
                },
                {
                  id: '3-1-4',
                  label: '三级 3-1-1'
                },
                {
                  id: '3-1-5',
                  label: '三级 3-1-1'
                },
                {
                  id: '3-1-6',
                  label: '三级 3-1-1'
                },
                {
                  id: '3-1-7',
                  label: '三级 3-1-1'
                },
                {
                  id: '3-1-8',
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 根据目录显示具体内容
      conentData: []
    }
  },
  created() {
    // 获取目录
    this.getListData()
  },
  methods: {
    // 取目录
    async getListData() {
      this.treeData = []
      const { code, data } = await getList()
      console.log('取目录code----', code)
      console.log('取目录data----', data)
      var treeList = [];
      data.forEach(val => {
        console.log(val)
        const lastIndex = val.chapter.lastIndexOf('.');
        val.parentChapter = val.chapter.substring(0, lastIndex);
        if(val.level === '1') {
          treeList.push(val);
        }
      })
      function treeDG(treeList) {
        treeList.forEach(pitem => {
          data.forEach(item => {
            if(pitem.chapter === item.parentChapter) {
              if(!pitem.children) {
                pitem.children = [item]
              } else {
                pitem.children.push(item);
              }
            }
          })
          if(pitem.children && pitem.children.length > 0) {
            treeDG(pitem.children)
          }
        })
      }
      treeDG(treeList,data)
      // this.treeData = data// 给目录赋值   
      //this.treeData = data.filter(item => item.label = item.title)// 给目录赋值
      this.treeData = this.handleData(null, data)  // 给目录赋值
      this.getContentist(this.treeData.length !== 0 ? this.treeData[0] : {})
    }, // 点击目录取内容
    async getContentist(val) {
      const { code, data } = await getContentist({
        startpid: val.startpid,
        endpid: val.endpid
      })
      this.conentData = data
      console.log('点击目录取内容code----', code)
      console.log('点击目录取内容data----', data)
    },
    // 查询内容
    async queryContentist() {
      const { code, data } = await queryContentist({
        keyword: this.searchInfo
      })
      this.conentData = data
      console.log('查询内容code----', code)
      console.log('查询内容data----', data)
    },
    // 查询按钮
    searchInfoClick() {
      console.log('查询按钮', this.searchInfo)
      this.queryContentist()
    },
    // 获取标注位置列表
    handleNodeClick(val) {
      console.log('获取标注位置列表', val)
      this.getContentist(val)
    },
    handleData(arr, arrParent) {
      const arr2 = arr || arrParent
      arr2.filter(item => {
        item.label = item.title
        if (item['children'] !== undefined && item['children'].length !== 0) {
          this.handleData(item['children'], null)
        }
      })
      return arr2
    },
    changeLoad(treeData) {
      this.iconClass =
        this.iconClass === 'fa fa-angle-double-down'
          ? 'fa fa-angle-double-up'
          : 'fa fa-angle-double-down'
      console.log(this.$refs.treeRef, this.$refs.treeRef.store._getAllNodes())
      this.$refs.treeRef.store._getAllNodes().forEach((item) => {
        item.expanded = !item.expanded
      })
      // treeData.forEach((item) => {

      //   this.$refs.treeRef.$children.nodesMap[item.id].expanded =
      //     !Boolean(this.$refs.treeRef.store.nodesMap[item.id].expanded);
      //   if (item.children?.length) {
      //     this.changeLoad(item.children);
      //   }
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
/*整个滚动条*/
::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}
/*水平的整个滚动条*/
::-webkit-scrollbar:horizontal {
  height: 6px;
  background-color: transparent;
}
/*滚动条轨道*/
::-webkit-scrollbar-track {
  background-color: transparent;
  border-right: none;
  border: none;
  border-radius: 5px;

}
/*竖直的滑块*/
::-webkit-scrollbar-thumb {
  background-color: #B2B4B4;
  border-radius: 3px;
  border-top: 1px solid #B2B4B4;
  border-bottom: 1px solid #B2B4B4;
  border-left: 1px solid #B2B4B4;
}
/*水平的滑块*/

::-webkit-scrollbar-thumb:horizontal {
  /* background-color: rgba(220, 228, 243, 1); */
  border-radius: 3px;
  border-top: 1px solid #B2B4B4;
  /* border-right: 1px solid #f1f5fa;
  border-left: 1px solid #f1f5fa; */
}
/*定义滚动条的轨道，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  border-radius: 10px;
  background-color: transparent;
}
/*定义滑块，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-thumb{
  /*width: 10px;*/
  height: 20px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #B2B4B4;
}
.derive-low-case {
  width: 1200px;
  height: calc(100vh - 167px);
  margin: auto;
  .title {
    font-size: 22px;
    color: #303133;
    padding: 15px 0;
  }
  .content-box {
    width: 100%;
    height: calc(100% - 55px);
    // border: 1px solid #C8CBD4;
    border: 1px solid #dde1e8;
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    .content-title {
      padding-left: 5px;
      height: 20px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      span {
        color: #303133;
        font-size: 16px;
        font-weight: 600;
      }
      &::before {
        content: " ";
        display: inline-block;
        margin-right: 5px;
        width: 3px;
        height: 16px;
        background-color: $mainColor;
      }
    }
    .main-body {
      height: calc(100% - 46px);
      display: flex;
      justify-content: space-between;
      .left-main {
        width: 40%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #c8cbd4;
        .left-main-top {
          font-size: 14px;
          padding: 0 15px;
          height: 46px;
          line-height: 46px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #c8cbd4;
          box-sizing: border-box;
          .open {
            color: #2d54b8;
            cursor: pointer;
          }
        }
        .left-main-bottom {
          height: calc(100% - 46px);
          padding: 5px 5px 0 5px;
          box-sizing: border-box;
          overflow: auto;
          .treeDom {
            ::v-deep .el-tree-node__label {
              font-size: 14px;
              color: #3C3B3E;
            }
          }
        }
      }
      .right-main {
        width: 55%;
        position: relative;
        // padding: 0 15px;
        box-sizing: border-box;
        &::after {
            display: inline-block;
            content: "";
            width: 100%;
            height: 32px;
            // background-color: #606266;
            position: absolute;
            bottom: 0;
            background-image:-webkit-linear-gradient(bottom,rgba(255,255,255,.9) 10%,rgba(255,255,255,.7) 40%,rgba(255,255,255,.4) 60%,rgba(255,255,255,0) 100%);
          }
        .right-main-top {
          height: 46px;
          border-bottom: 1px solid #c8cbd4;
          box-sizing: border-box;
          ::v-deep .el-input {
            width: 65%;
            .el-input__inner {
              background-color: #f3f3f3;
              height: 36px;
              line-height: 36px;
              color: #303133;
              font-size: 14px;
              &:focus {
                border-color: #2d54b8;
              }
              &::-webkit-input-placeholder {
                font-size: 14px;
                color: #c0c4cc;
              }
              &::-moz-input-placeholder {
                font-size: 14px;
                color: #c0c4cc;
              }
              &::-ms-input-placeholder {
                font-size: 14px;
                color: #c0c4cc;
              }
            }
          }
          ::v-deep .el-button--primary {
            background-color: #2d54b8;
            border-color: #2d54b8;
            padding: 9px 20px;
            margin-left: 20px;
            font-size: 14px;
          }
        }
        .right-main-bottom {
          height: calc(100% - 46px);
          overflow: auto;
          padding-top: 10px;
          padding-right: 10px;
          box-sizing: border-box;

          .right-item-title {
            font-size: 20px;
            color: #303133;
            font-weight: 600;
            overflow: hidden;
            white-space: normal;
            word-break: break-all;
          }
          .right-item-subTitle {
            font-size: 18px;
            color: #303133;
            font-weight: 600;
            overflow: hidden;
            white-space: normal;
            word-break: break-all;
          }
          .right-container {
            line-height: 24px;
            font-size: 14px;
            color: #3C3B3E;
            overflow: hidden;
            white-space: normal;
            word-break: break-all;
            text-indent: 2em;
          }
        }
      }
    }
  }
}
</style>
